<template>
  <section class="featured-courses" style="width: 100%">
    <AnimateOnScroll animation="fade-up" :threshold="0.2">
      <h2>推荐课程</h2>
    </AnimateOnScroll>
    <div class="course-cards">
      <div
        v-for="(course, index) in recommendCourseList"
        :key="index"
        class="course-item"
      >
        <AnimateOnScroll
          animation="fade-up"
          :threshold="0.2"
          :delay="index * 0.15"
        >
          <CourseCard :course="course" />
        </AnimateOnScroll>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from "vue";
import AnimateOnScroll from "./AnimateOnScroll.vue";
import { requestRecommendCourseList, type CourseInfoVO } from "@/api/course";
import CourseCard from "./CourseCard.vue";
const courses = ref([
  {
    title: "Web前端开发",
    description: "学习HTML、CSS和JavaScript",
    image: "/images/course1.png",
    link: "/courses/web-frontend",
  },
  {
    title: "Java编程",
    description: "从入门到精通的Java课程",
    image: "/images/course2.png",
    link: "/courses/java",
  },
  {
    title: "数据分析",
    description: "使用Python进行数据分析",
    image: "/images/course3.png",
    link: "/courses/data-analysis",
  },
]);

const recommendCourseList = ref<CourseInfoVO[]>([]);
const getRecommendCourseList = async () => {
  const res = await requestRecommendCourseList();
  recommendCourseList.value = res;
};
getRecommendCourseList();

// 处理图片加载错误
const handleImageError = (e: Event) => {
  const img = e.target as HTMLImageElement;
  console.log(img);

  // const courseTitle = courses.value.find(c => c.image === img.getAttribute('src'))?.title || '课程';
  //   img.src = `https://via.placeholder.com/400x220/3498db/ffffff?text=${encodeURIComponent(courseTitle)}`;
};
</script>

<style scoped>
.featured-courses {
  width: 100%;
  margin-bottom: 60px;
}

.featured-courses h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  color: #333;
}

.course-cards {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
}

.course-item {
  flex: 0 0 30%;
  margin-bottom: 20px;
}

.course-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-img-container {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background-color: #f0f5ff;
}

.course-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.course-card:hover img {
  transform: scale(1.05);
}

.course-card h3 {
  padding: 15px 15px 10px;
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.course-card p {
  padding: 0 15px 15px;
  margin: 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  flex-grow: 1;
}

.course-btn {
  display: block;
  text-align: center;
  padding: 10px 0;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  margin: 0 15px 15px;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}
.course-description {
  text-align: left;
  width: calc(100% - 30px);
  height: 50px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-btn:hover {
  background-color: #0069d9;
}

@media (max-width: 992px) {
  .course-item {
    flex: 0 0 45%;
  }
}

@media (max-width: 576px) {
  .course-item {
    flex: 0 0 100%;
  }
}
</style>
